<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>登陆我的博客</title>	
  
	<!-- 样式优先 脚本滞后 -->
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<style type="text/css">
	  *{margin:0;padding:0;}
	  body{font-size:12px;font-family:"微软雅黑";color:#fff;background:#01cbcb;}
	  /*.login{width:400px;height:350px;margin:100px auto;background:#0fb4ba}*/
	  .login{width:400px;height:370px;margin:100px auto;background:#0fb4ba;}
	  .login p{font-weight:400;text-align:center;padding-top:10px;font-size:24px;}
	  .login img{text-align:center;display:block;margin:0 auto;padding-top:5px;}
	  .login .mes{text-align:center;display:block;margin:0 auto;padding-top:10px;height:16px;line-height:16px;}
	  .login input{width:250px;height:30px;line-height:30px;font-size:16px;font-family:"微软雅黑";color:#545454;padding:2px 4px;border:0;margin:10px auto;display:block;}
	  .login .dl{width:258px;}
	  .login .dl:hover{background:#dedcdc;}
	  .login a{display:block;margin-left:175px;color:#545454;text-decoration:none;}
	  .login a:hover{color:#ff0000;}

	  .copy-right{margin-bottom:50px;margin-left:40%;}
  
   </style>
 </head>

 <body>
	<div class="login">
		<p>lgxing个人博客登录</p>
		<img src="images/blog_logo.png" alt="logo" width="130" height="118"/>
		<div id="message" class="mes">优秀的人总是习惯登陆</div>
		<form method="post" onsubmit="tm_submit">			
			<input type="text" name="username" autocomplete="off"  id="username"  class="text" placeholder="请输入用户名" maxLength="16"/>
			<input type="password" name="password" id="password"  placeholder="请输入密码" maxLength="16"/>
			<input type="submit" value="登    录" class="dl"/>
			<a href="#">忘记密码?</a>
		</form>
	</div>

	<div class="copy-right">
		<p>Copyright &copy; 2014.Company 潭州学院 All rights reserved.</p> 
	</div>
	<!-----//end-copyright---->
</div>
<!-----//end-main---->
<script type="text/javascript">
	//js操作dom元素，一定要dom元素初始化完毕以后才能进行操作
	$(function(){
		//js写法
		//document.getElementById("username").focus();
		//jquery 写法
		$("#username").focus();
	});
	
	function tm_submit(){
		var username = $("#username").val();
		var password = $("#password").val();
		if(username=="" || username.length==0){
			tm_showMessage("username","用户名不能为空!");
			return false;
		}
		
		if(username.length>10){
			tm_showMessage("username","您输入的用户名称不能超过10位!");
			$("#username").select();
			return false;
		}
		
		if(password=="" || password.length==0){
			tm_showMessage("password","请输入密码!");
			return false;
		}
		return true;
	}
	
	function tm_showMessage(id,message){

		$("#"+id).css("border","1px solid red").focus();			
		$("#message").html(message).show().fadeOut(3000,function(){
			$(this).empty();//清空
			$("#"+id).css("border","none");
		});
	};
</script>
  
 </body>
</html>
